<template>
    <div>
        <h2>门店列表</h2>
        <input type="button" value="新增门店" class="btn btn-primary"  @click="add"/>

        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>门店名称</td>
                    <td>分店名称</td>
                    <td>门店地址</td>
                    <td>门店状态</td>
                    <td>门店电话</td>
                    <td>门店特色</td>
                    <td>门店图片</td>
                    <td>门店介绍</td>
                    <td>操作</td>
                </tr>

                <tr v-for="item in data.list" :key="item.id">
                    <td>{{item.shopName}}</td>
                    <td>{{ item.shopFen }}</td>
                    <td>{{ item.addres }}</td>
                    <td>{{item.state==1?'营业中':'休息中'}}</td>
                    <td>{{ item.phone }}</td>
                    <td>{{ item.teseId }}</td>
                    <td>
                        <img :src="item.photo" alt="" style="width:100px;height:100px">
                    </td>
                    <td>{{item.desc}}</td>
                    <td>操作</td>
                </tr>
            </tbody>
        </table>

        <div>
            共{{data.totalCount}}条数据，当前第{{queryInfo.pageindex}}页，共{{queryInfo.toalsize}}页
            <input type="button" value="首页" @click="gopage('a')">
            <input type="button" value="上一页" @click="gopage('b')">
            <input type="button" value="下一页" @click="gopage('c')">
            <input type="button" value="尾页" @click="gopage('d')">
        </div>
    </div>
</template>

<script setup lang="ts">
import moment, { lang } from 'moment';
import { reactive,ref,onMounted } from 'vue';
import { useRouter,useRoute } from 'vue-router';
import axios from 'axios';
import { get } from 'node_modules/axios/index.cjs';
const router = useRouter();
const route = useRoute();
let add = () => {
    router.push("/SHopadd");
}



let data:any = reactive({
    list:[],
    totalCount:0,
    totalPage:0,
})


let queryInfo = reactive({
    pageindex:1,
    toalsize:2,
    shopName:''
})


let getList = () => {
    axios({
        url:'/api/Shops/GetShopsList',
        method:'get',
        params:queryInfo
    })
    .then((res) => {
        console.log(res);
        data.list = res.data.list;
        data.totalCount = res.data.totalCount;
        data.totalPage = res.data.totalPage;
    })
    .catch((err) => {
        console.log(err);
    })
}

onMounted(() => {
    getList();
})


const gopage = (str:string) => {
    switch(str){
        case 'a':
            queryInfo.pageindex = 1;
            break;
        case 'b':
            queryInfo.pageindex--;
            break;
        case 'c':
            queryInfo.pageindex++;
            break;
        case 'd':
            queryInfo.pageindex = data.totalPage;
            break;
    }
    getList();
}

</script>

<style scoped>

</style>